<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="80%">
    <el-descriptions
      :column="3"
      border
      v-loading="formLoading"
    >
      <el-descriptions-item label="企业名称">{{ formData.companyName }}</el-descriptions-item>
      <el-descriptions-item label="统一社会信用代码">{{ formData.unifiedSocialCreditCode }}</el-descriptions-item>
      <el-descriptions-item label="所属经济城">{{ formData.economicZone }}</el-descriptions-item>
      <el-descriptions-item label="公司类型">{{ formData.companyType }}</el-descriptions-item>
      <el-descriptions-item label="注册资金">{{ formData.registeredCapital }} 万</el-descriptions-item>
      <el-descriptions-item label="注册地址">
        {{ formData.registeredAddress }}
      </el-descriptions-item>
      <el-descriptions-item label="成立日期">{{ formatDate2(formData.establishmentDate) }}</el-descriptions-item>
      <el-descriptions-item label="法人姓名">{{ formData.legalRepresentative }}</el-descriptions-item> 
      <el-descriptions-item label="法人电话号码">{{ formData.legalPersonPhone }}</el-descriptions-item>
      <el-descriptions-item label="监事">{{ formData.supervisor }}</el-descriptions-item>
      <el-descriptions-item label="企业联系人">{{ formData.contactName }}</el-descriptions-item>
      <el-descriptions-item label="联系人电话">{{ formData.contactPhone }}</el-descriptions-item>
      <el-descriptions-item label="招商负责人">{{ formData.investmentManager }}</el-descriptions-item>
      <el-descriptions-item label="介绍人">{{ formData.referrer }}</el-descriptions-item>
      <el-descriptions-item label="" />
      <el-descriptions-item label="经营范围" :span="3">
          {{ formData.businessScope }}
      </el-descriptions-item>
      <el-descriptions-item label="备注" :span="3" >
        {{ formData.remarks }}
      </el-descriptions-item>

    </el-descriptions>

    <!-- Tab标签页 -->
    <el-tabs v-model="activeTab" type="border-card" class="mt-10px">
      <!-- 股东信息 Tab -->
      <el-tab-pane label="股东信息" name="shareholder">
        <div class="mb-10px">
          <el-button
            type="primary"
            @click="openShareholderForm"
            v-hasPermi="['oa:registered-company:create']"
          >
            <Icon icon="ep:plus" /> 新增股东
          </el-button>
        </div>
        <shareholder-list ref="shareholderListRef" :company-id="formData.id" business-type="registered-company" />
      </el-tab-pane>
    </el-tabs>

    <!-- 股东表单弹窗 -->
    <company-shareholders-form ref="shareholderFormRef" />

    <template #footer>
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { formatDate,formatDate2 } from '@/utils/formatTime'
import { RegisteredCompanyApi, RegisteredCompanyVO } from '@/api/oa/registeredcompany'
import ShareholderList from '../accountingcompanies/components/ShareholderList.vue'
import CompanyShareholdersForm from '../companyshareholders/CompanyShareholdersForm.vue'

/** 注册企业详情 表单 */
defineOptions({ name: 'RegisteredCompanyDetail' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中
const activeTab = ref('shareholder') // 当前激活的Tab
const formData = ref<RegisteredCompanyVO>({
  id: undefined,
  companyName: undefined,
  unifiedSocialCreditCode: undefined,
  economicZone: undefined,
  registeredCapital: undefined,
  registeredAddress: undefined,
  establishmentDate: undefined,
  legalRepresentative: undefined,
  supervisor: undefined,
  contactName: undefined,
  contactPhone: undefined,
  investmentManager: undefined,
  referrer: undefined,
  businessScope: undefined,
  remarks: undefined,
  creatorName: undefined,
  updaterName: undefined,
  createTime: undefined,
  updateTime: undefined,
  creator: undefined,
  updater: undefined,
  deleted: false,
  companyType: undefined, // 公司类型
  legalPersonPhone: undefined, // 法人电话号码
})

const isBusinessScopeExpanded = ref(false);
const truncatedBusinessScope = computed(() => {
  if (!formData.value.businessScope) return '';
  return formData.value.businessScope.slice(0, 100); // 限制显示前100个字符
});

const toggleBusinessScope = () => {
  isBusinessScopeExpanded.value = !isBusinessScopeExpanded.value;
};

const shareholderListRef = ref() // 股东列表组件引用
const shareholderFormRef = ref() // 新增股东表单组件引用

/** 打开股东表单 */
const openShareholderForm = () => {
  shareholderListRef.value?.openForm('create', undefined, {
    companyName: formData.value.companyName,
    businessType: 'registered-company'
  })
}

/** 打开弹窗 */
const open = async (id: number) => {
  dialogVisible.value = true
  dialogTitle.value = '查看注册企业详情'
  formLoading.value = true
  try {
    formData.value = await RegisteredCompanyApi.getRegisteredCompany(id)
  } finally {
    formLoading.value = false
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>


<style scoped>.business-scope span {
  cursor: pointer;
  word-break: break-all;
  white-space: pre-wrap;
}
</style>
